<form id="<?php echo $uniqid;?>">
	<div id="twostageRewardManage" class="easyui-panel" title="推广大使分佣记录查询">
		<div class="datagrid-toolbar" style="padding:5px;border-bottom:#eee 1px solid;">
			<table cellspacing="0" cellpadding="0">
				<tbody>
				<tr>
					<td colspan="3" style="padding-bottom: 5px;">
						<a href="javascript:void(0);" @click="init();" class="l-btn l-btn-small l-btn-plain"><span
								class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span
								class="l-btn-text">重载</span></span></a>
						<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='all'?'selected':''"
							  @click="filter('all')"><span class="l-btn-text">全部</span></span>
						<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='waiting'?'selected':''"
							  @click="filter('waiting')"><span class="l-btn-text">待入账</span></span>
						<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='accounted'?'selected':''"
							  @click="filter('accounted')"><span class="l-btn-text">已入账</span></span>
						<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='cancel'?'selected':''"
							  @click="filter('cancel')"><span class="l-btn-text">已取消</span></span>
						<span class="l-btn l-btn-small l-btn-plain" :class="params.mode=='back'?'selected':''"
							  @click="filter('back')"><span class="l-btn-text">已退回</span></span>
					</td>
				</tr>
				<tr>
					<td><span style="line-height:30px;">分佣日期</span>
						<input id="orderStartOn" v-model="params.start_on" style="width:110px" type="text"
							   class="easyui-datebox"> </input>至
						<input id="orderEndOn" v-model="params.end_on" style="width:110px" type="text"
							   class="easyui-datebox"> </input>
					</td>
					<td>&nbsp;<select v-model="params.keywordsType" class="forminput inputstyle textbox-text validatebox-text" style="width:120px">
						<option value="twostage_id">推广大使ID</option>
						<option value="twostage_phone">推广大使手机号</option>
						<option value="buyer_id">下单会员ID</option>
						<option value="buyer_phone">下单会员手机号</option>
						<option value="order_id">订单ID</option>
						<option value="order_sn">订单编号</option>
<!--						暂时不用，隐藏 By hacy.J 2022.3.3-->
<!--						<option value="goods_id">商品ID</option>-->
<!--						<option value="goods_title">商品名称</option>-->
					</select>&nbsp;<input v-model="params.keywords" placeholder="请输入内容" @keyup.enter="init" @blur="setNew"
										  class="forminput inputstyle validatebox-text textbox-prompt easyui-validatebox"
										  type="text" style="width: 300px;"> </input>
					</td>
					<td><a href="javascript:void(0);" @click="init" class="l-btn l-btn-small l-btn-plain"><span
							class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span
							class="l-btn-text">查询</span></span></a>
						<a href="javascript:void(0);" @click="twostageRewardExport" class="l-btn l-btn-small l-btn-plain"><span
								class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiazai"></i><span
								class="l-btn-text">导出</span></span></a></td>
				</tr>
				</tbody>
			</table>
		</div>
		<div class="con"
			 style="-moz-user-select:none;overflow: hidden;padding-bottom: 50px;">
			<table class="datagrid-htable" border="0" cellspacing="0" cellpadding="0"
				   style="width: 100%;border: #ccc 0 solid;border-collapse:collapse;">
				<thead>
					<tr class="datagrid-header-row" style="background-color: #f9f9f9; font-weight: bold; font-size: 1.8em;">
						<td width="5%" style="padding:0; border-bottom:#eee 1px solid;" align="center">ID</td>
						<td width="25%" style="border-bottom:#eee 1px solid;" align="center">订单及商品信息</td>
						<td width="15%" style="border-bottom:#eee 1px solid;" align="center">下单用户</td>
						<td width="15%" style="border-bottom:#eee 1px solid;" align="center">推广大使信息</td>
						<td width="5%" style="border-bottom:#eee 1px solid;" align="center">佣金金额</td>
						<td width="5%" style="border-bottom:#eee 1px solid;" align="center">入帐状态</td>
						<td width="10%" style="border-bottom:#eee 1px solid;padding: 5px;" align="center">分佣时间</td>
						<td width="10%" style="border-bottom:#eee 1px solid;padding: 5px;" align="center">变动时间</td>
					</tr>
				</thead>
				<tbody>
				<template v-for="(vo,index) in dataset">
					<tr :class="'datagrid-body-row tr_color_'+ index%2">
						<td style="border:#eee 1px solid; text-align: center;">{{vo.id}}</td>
						<td style="border:#eee 1px solid; padding: 10px;">
							<div style="border-bottom:#eee 1px solid; color: #d39905;" v-if="vo.order_info">
								(订单ID:{{vo.order_info.id}}) 订单编号：{{vo.order_info.order_sn}}
							</div>
							<div style="border-bottom:#eee 1px solid; text-align: center;" v-else>未知订单</div>
							<div style="" v-if="vo.order_item_info">
								{{vo.order_item_info.goods_title}}<br>
								<span style="color: #49b1c4">商品ID:{{vo.order_item_info.goods_id}} | 商品款式：{{vo.order_item_info.goods_sku_text}} | 商品数量：{{vo.order_item_info.goods_num}}件</span>
							</div>
							<div style=" text-align: center;" v-else>未知商品</div>
						</td>
						<td style="border:#eee 1px solid; padding: 0 10px;" v-if="vo.buyer_info">
							ID:{{vo.buyer_info.id}}<br>
							昵称：{{vo.buyer_info.realname?vo.buyer_info.realname:vo.buyer_info.nickname}}<br>
							电话：{{vo.buyer_info.phone?vo.buyer_info.phone:''}}
						</td>
						<td style="border:#eee 1px solid; text-align: center;" v-else>未知用户</td>
						<td style="border:#eee 1px solid; padding: 0 10px;" v-if="vo.twostage">
							推广大使ID:{{vo.twostage.id}}<br>
							推广大使昵称：{{vo.twostage.realname?vo.twostage.realname:vo.twostage.nickname}}<br>
							电话：{{vo.twostage.phone?vo.twostage.phone:''}}
						</td>
						<td style="border:#eee 1px solid; text-align: center;" v-else>未知推广大使</td>
						<td style="border:#eee 1px solid; text-align: center;">{{vo.commission}}元</td>
						<td style="border:#eee 1px solid; text-align: center;">
							<span :class="'status_color_'+ vo.status">{{vo.status_name}}</span>
						</td>
						<td style="border:#eee 1px solid; text-align: center;">{{vo.created_at}}</td>
						<td style="border:#eee 1px solid; text-align: center;">{{vo.updated_at}}</td>
					</tr>
				</template>
				</tbody>
			</table>
			<div class="datagrid-pager pagination"
				 style="width: 100%;position: fixed;bottom: 0px; background-color: #f1f1f1;padding-top:5px;border-top:#ccc 1px solid;display: flex;">
				<table cellspacing="0" cellpadding="0" border="0">
					<tbody>
					<tr>
						<td><select v-model="params.rows" class="pagination-page-list" @change="page_rows_change()">
							<option value="10">10</option>
							<option value="20">20</option>
							<option value="50">50</option>
							<option value="100">100</option>
						</select></td>
						<td>
							<div class="pagination-btn-separator"></div>
						</td>
						<td>
							<template v-if="params.page==1">
								<a href="javascript:;" @click="first"
								   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
								><span class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-first">&nbsp;</span></span></a>
							</template>
							<template v-else>
								<a href="javascript:;" @click="first"
								   class="l-btn l-btn-small l-btn-plain"
								><span class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-first">&nbsp;</span></span></a>
							</template>
						</td>
						<td>
							<template v-if="params.page==1">
								<a href="javascript:;" @click="pre"
								   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"
								><span class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
							</template>
							<template v-else>
								<a href="javascript:;" @click="pre"
								   class="l-btn l-btn-small l-btn-plain"
								><span class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-prev">&nbsp;</span></span></a>
							</template>
						</td>
						<td>
							<div class="pagination-btn-separator"></div>
						</td>
						<td><span style="padding-left:6px;">第</span></td>
						<td><input class="pagination-num" type="text" v-model="params.page" size="2" @blur="page_change"></td>
						<td><span style="padding-right:6px;">共{{totalPage}}页</span></td>
						<td>
							<div class="pagination-btn-separator"></div>
						</td>
						<td>
							<template v-if="params.page==totalPage">
								<a href="javascript:;" @click="next"
								   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
										class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-next">&nbsp;</span></span></a>
							</template>
							<template v-else>
								<a href="javascript:;" @click="next" class="l-btn l-btn-small l-btn-plain"><span
										class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-next">&nbsp;</span></span></a>
							</template>
						</td>
						<td>
							<template v-if="params.page==totalPage">
								<a href="javascript:;" @click="last"
								   class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled"><span
										class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-last">&nbsp;</span></span></a>
							</template>
							<template v-else>
								<a href="javascript:;" @click="last" class="l-btn l-btn-small l-btn-plain"><span
										class="l-btn-left l-btn-icon-left"><span
										class="l-btn-text l-btn-empty">&nbsp;</span><span
										class="l-btn-icon pagination-last">&nbsp;</span></span></a>
							</template>
						</td>
						<td>
							<div class="pagination-btn-separator"></div>
						</td>
						<td><a href="javascript:;" @click="init" class="l-btn l-btn-small l-btn-plain"><span
								class="l-btn-left l-btn-icon-left"><span
								class="l-btn-text l-btn-empty">&nbsp;</span><span
								class="l-btn-icon pagination-load">&nbsp;</span></span></a></td>
					</tr>
					</tbody>
				</table>
				<div class="pagination-info">显示{{(params.page-1) * params.rows + 1}}到{{params.page * params.rows}},共{{total}}记录</div>
			</div>
		</div>
	</div>
</form>
<div id="rewarddlg" class="easyui-dialog" style="width:840px; height:520px;" title="信息框" closed="true"></div>

<script>
	var rewardVm = new Vue({
		el: '#<?php echo $uniqid;?>',
		data: {
			dataset: [],
			params: {
				sort: 'created_at',
				order: 'desc',
				rows: 10,
				page: 1,
				start_on: '',
				end_on: '',
				keywords: '',
				keywordsType:'twostage_id',
				mode: 'all'
			},
			total: 0,
			totalPage: 0,
		},
		filters: {
			formatDate(nS){
				return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ');
			}
		},
		mounted() {
			setTimeout(()=>{
				$('#<?php echo $uniqid;?> #orderStartOn').datebox('setValue', this.params.start_on);
				$('#<?php echo $uniqid;?> #orderEndOn').datebox('setValue', this.params.end_on);
				this.init();
			}, 200);
		},
		methods: {
			init: function () {
				$('#<?php echo $uniqid;?> .pagination').width($(window).width() - $("#leftMenu").width() - 30);
				showLoading('#<?php echo $uniqid;?>');
				this.params.start_on = $('#<?php echo $uniqid;?> #orderStartOn').datebox('getValue');
				this.params.end_on = $('#<?php echo $uniqid;?> #orderEndOn').datebox('getValue');
				$.post('/admin/twostage/reward', this.params, (data) => {
					hideLoading();
					this.dataset = data.rows;
					this.total = data.total;
					this.totalPage = Math.ceil(data.total / this.params.rows);
				}, 'json');
			},
			twostageRewardExport:function () {
				showLoading('.con');
				$.post('/admin/twostage/rewardexport', {
					keywordsType: this.params.keywordsType,
					keywords: this.params.keywords,
					start_on: this.params.start_on,
					end_on: this.params.end_on,
					mode: this.params.mode,
				}, function (data) {
					hideLoading();
					if (parseInt(data.ret) === 0) {
						$.messager.show({
							title: '提示',
							msg: data.msg,
							timeout: 3000,
							showType: 'slide'
						});
						eventmaterialDownload(data.data);
					} else {
						$.messager.alert('提示', data.msg, 'warning');
					}
				}, 'json').fail((response)=> {
					hideLoading();
					$.messager.alert('提示', response.responseText, 'warning');
				});
			},
			setNew:function (){
				rewardVm.params.page = 1;
			},
			page_rows_change: function (){
				rewardVm.params.page = 1;
				rewardVm.init();
			},
			page_change:function (){
				rewardVm.init();
			},
			filter(mode) {
				this.params.mode = mode;
				this.init();
			},
			first: function () {
				rewardVm.params.page = 1;
				rewardVm.init();
			},
			pre: function () {
				if (rewardVm.params.page > 1) {
					rewardVm.params.page--;
					rewardVm.init();
				}
			},
			next: function () {
				if (rewardVm.params.page < rewardVm.totalPage) {
					rewardVm.params.page++;
					rewardVm.init();
				}
			},
			last: function () {
				rewardVm.params.page = rewardVm.totalPage;
				rewardVm.init();
			},
		}
	});

	document.addEventListener('onResize', (e) => {
		let height = $(window).height() - $(".top").height() - 46;
		$('#twostageRewardManage').panel('resize', {width: 'auto', height: 'auto'});
	});
</script>

<style>
	.l-btn-plain{
		border: rgba(0,0,0,0) 1px solid;
	}
	.order-item-rows {
		padding: 4px;
		display: flex;
		min-height: 90px;
		justify-content: space-between;
		align-items: center;
		border-bottom: #eee 1px solid;
	}

	.datagrid-body-row td{
		line-height: 1.8em !important;
	}

	.datagrid-toolbar .selected {
		color: #f1f1f1;
		background: #1065a7;
		border: 1px solid #f0f0f0;
	}

	.tr_color_0{
		background: #ffffff;
	}
	.tr_color_1{
		background: #f8f8f8;
	}
	.status_color_0{
		color: #f89a2d;
	}
	.status_color_1{
		color: #0eb913;
	}
	.status_color_-1{
		color: #d33632;
	}
	.status_color_-2{
		color: #1F1F1F;
	}
</style>